<template>
  <div class="order-management">
    <van-nav-bar title="订单管理" />
    
    <!-- 订单状态标签页 -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部" name="all" />
      <van-tab title="待付款" name="unpaid" />
      <van-tab title="待发货" name="unshipped" />
      <van-tab title="待收货" name="unreceived" />
      <van-tab title="已完成" name="completed" />
    </van-tabs>

    <!-- 订单列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="order-list">
          <div v-for="order in orderList" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-no">订单号：{{ order.orderNo }}</span>
              <span class="order-status" :class="order.status">{{ getStatusText(order.status) }}</span>
            </div>
            
            <div class="order-content">
              <div v-for="item in order.items" :key="item.id" class="order-item">
                <img :src="item.image" :alt="item.name" class="item-image">
                <div class="item-info">
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-specs">{{ item.specs }}</div>
                  <div class="item-price">
                    <span class="price">¥{{ item.price }}</span>
                    <span class="quantity">x{{ item.quantity }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="order-footer">
              <div class="order-total">
                共{{ getTotalQuantity(order) }}件商品
                合计：<span class="total-price">¥{{ getTotalPrice(order) }}</span>
              </div>
              <div class="order-actions">
                <template v-if="order.status === 'unpaid'">
                  <van-button size="small" plain type="danger" @click="cancelOrder(order)">取消订单</van-button>
                  <van-button size="small" type="danger" @click="payOrder(order)">立即付款</van-button>
                </template>
                <template v-else-if="order.status === 'unshipped'">
                  <van-button size="small" plain type="danger" @click="cancelOrder(order)">取消订单</van-button>
                </template>
                <template v-else-if="order.status === 'unreceived'">
                  <van-button size="small" plain type="primary" @click="viewTracking(order)">查看物流</van-button>
                  <van-button size="small" type="danger" @click="confirmReceive(order)">确认收货</van-button>
                </template>
                <template v-else-if="order.status === 'completed'">
                  <van-button size="small" plain type="primary" @click="viewTracking(order)">查看物流</van-button>
                  <van-button size="small" type="danger" @click="deleteOrder(order)">删除订单</van-button>
                </template>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showDialog, showToast } from 'vant'

const activeTab = ref('all')
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const orderList = ref([])

// 模拟订单数据
const mockOrders = [
  {
    id: 1,
    orderNo: 'ORDER202403250001',
    status: 'unpaid',
    items: [
      {
        id: 1,
        name: '经典飞行员太阳镜',
        price: 299,
        quantity: 1,
        image: 'https://img.alicdn.com/imgextra/i4/2200726525386/O1CN01yrwrip1TfMYIZnA2g_!!2200726525386.jpg',
        specs: '偏光镜片 | 防紫外线'
      }
    ]
  },
  {
    id: 2,
    orderNo: 'ORDER202403250002',
    status: 'unshipped',
    items: [
      {
        id: 2,
        name: '复古圆形光学镜',
        price: 399,
        quantity: 2,
        image: 'https://img.alicdn.com/imgextra/i1/2200726525386/O1CN01DMRoWA1TfMYMk7ebQ_!!2200726525386.jpg',
        specs: '防蓝光 | 超轻镜框'
      }
    ]
  },
  {
    id: 3,
    orderNo: 'ORDER202403250003',
    status: 'unreceived',
    items: [
      {
        id: 3,
        name: '日抛隐形眼镜',
        price: 99,
        quantity: 3,
        image: 'https://img.alicdn.com/imgextra/i4/2200726525386/O1CN01nCpuWx1TfMYKNzKkt_!!2200726525386.jpg',
        specs: '30片装 | 高透氧'
      }
    ]
  }
]

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    unpaid: '待付款',
    unshipped: '待发货',
    unreceived: '待收货',
    completed: '已完成'
  }
  return statusMap[status] || status
}

// 计算订单总数量
const getTotalQuantity = (order) => {
  return order.items.reduce((total, item) => total + item.quantity, 0)
}

// 计算订单总价
const getTotalPrice = (order) => {
  return order.items.reduce((total, item) => total + item.price * item.quantity, 0)
}

// 取消订单
const cancelOrder = (order) => {
  showDialog({
    title: '取消订单',
    message: '确定要取消该订单吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    onConfirm: () => {
      showToast('订单已取消')
      // TODO: 调用取消订单接口
    }
  })
}

// 支付订单
const payOrder = (order) => {
  showDialog({
    title: '支付订单',
    message: `订单金额：¥${getTotalPrice(order)}`,
    confirmButtonText: '确认支付',
    cancelButtonText: '取消',
    onConfirm: () => {
      showToast('支付成功')
      // TODO: 调用支付接口
    }
  })
}

// 查看物流
const viewTracking = (order) => {
  showDialog({
    title: '物流信息',
    message: '订单号：' + order.orderNo + '\n物流状态：运输中\n预计送达：2024-03-27',
    confirmButtonText: '确定'
  })
}

// 确认收货
const confirmReceive = (order) => {
  showDialog({
    title: '确认收货',
    message: '确认已收到商品？',
    confirmButtonText: '确认收货',
    cancelButtonText: '取消',
    onConfirm: () => {
      showToast('确认收货成功')
      // TODO: 调用确认收货接口
    }
  })
}

// 删除订单
const deleteOrder = (order) => {
  showDialog({
    title: '删除订单',
    message: '确定要删除该订单吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    onConfirm: () => {
      showToast('订单已删除')
      // TODO: 调用删除订单接口
    }
  })
}

// 加载更多
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      refreshing.value = false
      orderList.value = []
    }
    orderList.value.push(...mockOrders)
    loading.value = false
    if (orderList.value.length >= 10) {
      finished.value = true
    }
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}
</script>

<style scoped>
.order-management {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.order-list {
  padding: 12px;
}

.order-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.order-header {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.order-no {
  font-size: 14px;
  color: #666;
}

.order-status {
  font-size: 14px;
}

.order-status.unpaid {
  color: #ee0a24;
}

.order-status.unshipped {
  color: #ff976a;
}

.order-status.unreceived {
  color: #07c160;
}

.order-status.completed {
  color: #969799;
}

.order-content {
  padding: 12px;
}

.order-item {
  display: flex;
  margin-bottom: 12px;
}

.order-item:last-child {
  margin-bottom: 0;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 14px;
  color: #323233;
  margin-bottom: 4px;
}

.item-specs {
  font-size: 12px;
  color: #969799;
  margin-bottom: 4px;
}

.item-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #ee0a24;
  font-size: 14px;
  font-weight: 500;
}

.quantity {
  color: #969799;
  font-size: 12px;
}

.order-footer {
  padding: 12px;
  border-top: 1px solid #f5f5f5;
}

.order-total {
  text-align: right;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.total-price {
  color: #ee0a24;
  font-size: 16px;
  font-weight: 500;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

:deep(.van-tabs__wrap) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.van-tab) {
  font-size: 14px;
}
</style> 